<template>
  <view>
    <view class="es-agreement" @tap="onCheck">
      <view
        class="es-agreement__radio"
        :style="{
          border: '2rpx solid ' + (checked ? activeColor : color),
          background: checked ? activeColor : 'transparent',
        }"
      >
        <text v-if="checked" class="esfont" style="font-size: 16rpx; color: #ffffff">&#xe700;</text>
      </view>

      <text class="es-agreement-text ml10" :style="{ color: color }">我已阅读并同意</text>
      <text
        class="es-agreement-text"
        :style="{ color: hrefColor }"
        v-if="userHref"
        @tap.stop="toHref('用户协议', userHref)"
      >
        《用户协议》
      </text>
      <text
        class="es-agreement-text"
        :style="{ color: hrefColor }"
        v-if="privacyHref"
        @tap.stop="toHref('隐私政策', privacyHref)"
      >
        《隐私政策》
      </text>
      <text
        class="es-agreement-text mt20"
        :style="{ color: hrefColor }"
        v-if="juniorHref"
        @tap.stop="toHref('儿童/青少年个人信息保护规则', juniorHref)"
      >
        《儿童/青少年个人信息保护规则》
      </text>
    </view>

    <view
      class="w750 mt30"
      :style="{ height: (state.bottomHeight == 0 ? 10 : state.bottomHeight) + 'px' }"
    ></view>

    <es-bottom-popup
      :show="state.showDialog"
      title="用户协议及隐私保护"
      @close="state.showDialog = false"
    >
      <view class="flex-center flex-column">
        <view class="es-popup__bar"></view>
        <text class="es-popup__title">用户协议及隐私保护</text>

        <view class="es-agreement mt30">
          <text class="es-agreement-text ml10" style="color: #666666">我已阅读并同意</text>
          <text
            class="es-agreement-text"
            :style="{ color: hrefColor }"
            v-if="userHref"
            @tap.stop="toHref('用户协议', userHref)"
          >
            《用户协议》
          </text>
          <text
            class="es-agreement-text"
            :style="{ color: hrefColor }"
            v-if="privacyHref"
            @tap.stop="toHref('隐私政策', privacyHref)"
          >
            《隐私政策》
          </text>
          <text
            class="es-agreement-text mt20"
            :style="{ color: hrefColor }"
            v-if="juniorHref"
            @tap.stop="toHref('儿童/青少年个人信息保护规则', juniorHref)"
          >
            《儿童/青少年个人信息保护规则》
          </text>
        </view>
        <!-- #ifdef MP-WEIXIN -->
        <view class="es-login-btn" :style="{ background: loginBg }" @tap="confirm">
          <text class="es-login-btn__text" :style="{ color: loginColor }">同意并登录</text>
          <button class="es-login-button" open-type="getUserInfo" @getuserinfo="confirm"></button>
        </view>
        <!-- #endif -->
        <!-- #ifdef APP -->
        <view class="es-login-btn" :style="{ background: loginBg }" @tap="confirm">
          <text class="es-login-btn__text" :style="{ color: loginColor }">同意并登录</text>
        </view>
        <!-- #endif -->
        <view class="flex-center mt50" @tap="state.showDialog = false">
          <text class="es-agreement-text" style="color: #999999">不同意</text>
        </view>
        <view
          class="w750"
          :style="{ height: (state.bottomHeight == 0 ? 10 : state.bottomHeight) + 'px' }"
        ></view>
      </view>
    </es-bottom-popup>
  </view>
</template>

<script lang="ts" setup>
import esBottomPopup from './es-bottom-popup.vue'
withDefaults(
  defineProps<{
    userHref?: string
    privacyHref?: string
    juniorHref?: string
    color?: string
    activeColor?: string
    hrefColor?: string
    loginBg?: string
    loginColor?: string
    checked?: boolean
    loginType?: string
  }>(),
  {
    userHref: '',
    privacyHref: '',
    juniorHref: '',
    color: '',
    activeColor: '',
    hrefColor: '',
    loginBg: '',
    loginColor: '',
    checked: false,
    loginType: '',
  },
)
const state = reactive({
  bottomHeight: 0,
  showDialog: false,
})
function toHref(title, href) {}
function confirm() {}
function onCheck() {}
</script>

<style lang="scss" scoped>
.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.w750 {
  width: 750rpx;
}

.ml10 {
  margin-left: 10rpx;
}

.mt20 {
  margin-top: 20rpx;
}

.mt30 {
  margin-top: 30rpx;
}

.mt50 {
  margin-top: 50rpx;
}

.es-agreement {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 750rpx;
  height: 80rpx;
}

.es-agreement__radio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 28rpx;
  height: 28rpx;
  border-radius: 28rpx;
}

.es-agreement-text {
  font-size: 25rpx;
  line-height: 25rpx;
}

.es-login-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 450rpx;
  height: 96rpx;
  margin-top: 80rpx;
  border-radius: 48rpx;
}

.es-login-button {
  position: absolute;
  top: 0;
  left: 0;
  width: 450rpx;
  height: 96rpx;
  background: transparent;
  border-radius: 48rpx;
}

.es-login-btn__text {
  font-size: 36rpx;
}

.es-popup__bar {
  width: 88rpx;
  height: 10rpx;
  margin-top: 30rpx;
  background: #666666;
  border-radius: 5rpx;
}

.es-popup__title {
  margin-top: 50rpx;
  font-size: 40rpx;
  font-weight: bold;
  color: #1e1e1e;
}
</style>
